import Icon from '@/components/Icon'
// 组件手册：https://antd-mobile.gitee.io/zh/components/tab-bar
import { Button, TabBar } from 'antd-mobile'
import styles from './index.module.scss'

export default function Test() {
  return (
    <div className={styles.root}>
      <h1>测试页面</h1>
      <TabBar>
        <TabBar.Item key='1' icon={<Icon type='iconbtn_home' />} title='首页' />
        <TabBar.Item key='2' icon={<Icon type='iconbtn_qa' />} title='问答' />
        <TabBar.Item key='3' icon={<Icon type='iconbtn_video' />} title='视频' />
        <TabBar.Item key='4' icon={<Icon type='iconbtn_mine' />} title='我的' />
      </TabBar>

      <TabBar className='geek-tabbar'>
        <TabBar.Item
          key='1'
          icon={(active: boolean) =>
            active ? <Icon type='iconbtn_home_sel' /> : <Icon type='iconbtn_home' />
          }
          title='首页'
        />
        <TabBar.Item
          key='2'
          icon={(active: boolean) =>
            active ? <Icon type='iconbtn_qa_sel' /> : <Icon type='iconbtn_qa' />
          }
          title='问答'
        />
        <TabBar.Item
          key='3'
          icon={(active: boolean) =>
            active ? <Icon type='iconbtn_video_sel' /> : <Icon type='iconbtn_video' />
          }
          title='视频'
        />
        <TabBar.Item
          key='4'
          icon={(active: boolean) =>
            active ? <Icon type='iconbtn_mine_sel' /> : <Icon type='iconbtn_mine' />
          }
          title='我的'
        />
      </TabBar>

      <Button color='primary'>按钮</Button>
      <h4 className='geek-color'>极客园主色</h4>
    </div>
  )
}
